<template>
	<div id="giftlist-app">
		<div style="background: #EDEDED;">
			<div class='flex'>
				<div v-for="g in gift" @click="$router.push('/GiftDetail/'+g.id)" class="gift-item">
					<div class="img-box">
						<img v-bind:src="FileUrl+g.img" onerror="this.src=config.NoImg" />
					</div>
					<div class="con-box">
						<label>{{g.name}}</label>						
						<article>{{g.integral}}<span>积分</span></article>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				gift: [],
				FileUrl: config.FileUrl
			}
		},
		components: {},
		watch: {},
		beforeCreate: function() {
			//组件实例刚刚被创建，但组件属性尚未
			//alert(config.ApiUrl);
			this.$layer.loading('加载中...');
			let self = this;
			this.$http.get(config.ApiUrl + 'gift/List').then(
				response => {
					this.gift = response.body.data;
					console.log("-----------------" + JSON.stringify(response.body.data));
				}
			);

		},

		mounted: function() {

		},
		updated: function() {
			this.$layer.close();
			// 			var imgList = document.querySelectorAll("img");
			// 			imgList.forEach(function(v) {
			// 				console.log(v);
			// 				v.addEventListener('onerror', () => {
			// 				      alert(1);
			// 				})
			// 			});
		},
		methods: {
			GiftInfo: function(id) {
				this.$router.push('GiftDetail/' + id);
			},
			defaultImg: function() {
				alert(1);
			}
			// 			NoImg:function(img){
			// 				
			// 			}
		}

	}
</script>

<style>
	#giftlist-app .flex {
		flex-wrap: wrap;
		margin-bottom: .2rem;
	}

	#giftlist-app .gift-item {
		width: 48%;
		background-color: white;
		margin-left: 2%;
		margin-top: 2%;
		padding: 1%;
	}

	#giftlist-app .gift-item .img-box {
		font-size: 0;
		border: 1px solid #F1F1F1;
	}

	#giftlist-app .gift-item .con-box {
		color: #666;
		font-size: 1.4rem;
	}

	#giftlist-app .gift-item .con-box article {
		color: #FF4444;
		font-size: 2rem;
		display: inline-block;
		text-align: right;
	}

	#giftlist-app .gift-item .con-box span {
		color: #838282;
		font-size: small;
	}
</style>
